<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
		<link rel="shortcut icon" type="image/png" href="../../img/favicon.png">
        <title>jsPlumb 2.3.0 demo - groups</title>
		

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
<link rel="stylesheet" href="../../css/main.css">
        <link rel="stylesheet" href="../../css/jsplumbtoolkit-defaults.css">
<link rel="stylesheet" href="../../css/jsplumbtoolkit-demo.css">
		<link rel="stylesheet" href="demo.css">
    </head>
    
    <body data-demo-id="groups">
        <div class="navbar navbar-top navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand" href="/"><img src="../../img/logo-medium-jsplumb.png"></a>
            <div class="community"></div>

        </div>

        <div class="navbar-collapse collapse nav-wrapper">
            <ul class="nav navbar-nav">
                <li><a href="../../">DEMOS</a></li>
                <li><a href="../../doc/home.html">DOCS</a></li>
                <li><a href="../../apidocs/index.html">API</a></li>
                <li><a href="../../download">DOWNLOAD</a></li>
                <li><a href="http://beta.jsplumbtoolkit.com/contact.html">CONTACT</a></li>
                <li><a href="https://blog.jsplumbtoolkit.com">BLOG</a></li>

            </ul>

            <div class="social-nav hidden-xs">
                <a href="http://twitter.com/jsplumblib" class="link"><span class="icon-twitter"></span></a>
                <a href="http://github.com/sporritt/jsplumb/" class="link"><span class="icon-github"></span></a>
                <a href="http://www.linkedin.com/company/jsplumb" class="link"><span class="icon-linkedin"></span></a>

            </div>
        </div><!--/.nav-collapse -->
    </div>
</div>

        <div class="jtk-demo-main">
            <!-- demo -->
            <div class="jtk-demo-canvas canvas-wide flowchart-demo jtk-surface jtk-surface-nopan" id="canvas">

                <div class="group-container" id="container1" group="one">
                    <div class="title"></div>
                    <ul>
                        <li>Elements constrained to group (<strong>constrain:true</strong>)</li>
                        <li>Elements are draggable to other groups </li>
                        <li>Deletes group and children</li>
                        <li>Not droppable (<strong>droppable:false</strong>)</li>
                    </ul>
                    <div class="del" delete-all></div>
                    <div class="node-collapse"></div>
                    <div id="c1_1" class="w" style="left:30px;top:35px">1.1</div>
                    <div id="c1_2" class="w" style="left:160px;top:140px">1.2</div>
                </div>

                <div class="group-container" id="container2" group="two">
                    <div class="title"></div>
                    <ul>
                        <li>Elements are reverted on drop outside (<strong>revert:true</strong>)</li>
                        <li>Elements not draggable to other groups (<strong>dropOverride:true</strong>)</li>
                        <li>Deletes group only</li>
                    </ul>
                    <div class="del"></div>
                    <div class="node-collapse"></div>
                    <div id="c2_1" class="w" style="left:30px;top:40px">2.1</div>
                    <div id="c2_2" class="w" style="left:150px;top:160px">2.2</div>
                </div>

                <div class="group-container" id="container3" group="three">
                    <div class="title"></div>
                    <ul>
                        <li>Elements may be dragged outside bounds (<strong>revert:false</strong>)</li>
                        <li>Elements are draggable to other groups</li>
                        <li>Deletes group only</li>
                    </ul>
                    <div class="del"></div>
                    <div class="node-collapse"></div>
                    <div id="c3_1" class="w" style="left:30px;top:35px">3.1</div>
                    <div id="c3_2" class="w" style="left:80px;top:162px">3.2</div>
                </div>

                <div class="group-container" id="container4" group="four">
                    <div class="title"></div>
                    <ul>
                        <li>Elements pruned on drop outside (<strong>prune:true</strong>)</li>
                        <li>Elements are draggable to other groups</li>
                        <li>Deletes group and children</li>
                    </ul>
                    <div class="del" delete-all></div>
                    <div class="node-collapse"></div>
                    <div id="c4_1" class="w" style="left:30px;top:35px">4.1</div>
                    <div id="c4_2" class="w" style="left:110px;top:150px">4.2</div>
                </div>

                <div class="group-container" id="container5" group="five">
                    <div class="title"></div>
                    <ul>
                        <li>Elements orphaned on drop outside (<strong>orphan:true</strong>)</li>
                        <li>Elements are draggable to other groups</li>
                        <li>Deletes group only</li>
                        <li>Not droppable (<strong>droppable:false</strong>)</li>
                    </ul>
                    <div class="del"></div>
                    <div class="node-collapse"></div>
                    <div id="c5_1" class="w" style="left:30px;top:35px">5.1</div>
                    <div id="c5_2" class="w" style="left:140px;top:130px">5.2</div>
                </div>

                <div class="group-container" id="container6" group="six">
                    <div class="title"></div>
                    <ul>
                        <li>No connections shown when group collapsed (<strong>proxied:false</strong>)</li>
                        <li>Elements are draggable to other groups</li>
                        <li>Deletes group and children</li>
                    </ul>
                    <div class="del" delete-all></div>
                    <div class="node-collapse"></div>
                    <div id="c6_1" class="w" style="left:160px;top:45px">6.1</div>
                    <div id="c6_2" class="w" style="left:30px;top:150px">6.2</div>
                </div>

                <div class="group-container" id="container7" group="seven">
                    <div class="title"></div>
                    <ul>
                        <li>Elements are draggable to other groups, using ghost proxy (<strong>ghost:true</strong>)</li>
                        <li>Deletes group and children</li>
                    </ul>
                    <div class="del" delete-all></div>
                    <div class="node-collapse"></div>
                    <div id="c7_1" class="w" style="left:30px;top:35px">7.1</div>
                    <div id="c7_2" class="w" style="left:90px;top:150px">7.2</div>
                </div>

                <div class="w" id="standalone" style="left:455px;top:280px" title="drag me into a group. if you want to.">?</div>

                <div class="events"><h3>Events</h3><div id="events"></div></div>
            </div>
            <!-- /demo -->
        </div>
		
		<script src="../../js/jsplumb.min.js"></script>
		
		<script src="demo.js"></script>
		<script src="../../js/demo-list.js"></script>
		
		<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-49979015-1', 'auto');
    ga('send', 'pageview');

</script>

        
     </body>
</html>